<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<title>Encrypt files</title> 
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<script type="text/javascript" src="./js/third-party/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./js/third-party/jquery.blockUI.js"></script>
		<script type="text/javascript" src="./js/third-party/nacl.min.js"></script>
		<script type="text/javascript" src="./js/third-party/nacl-util.min.js"></script>
		<script type="text/javascript" src="./js/third-party/sealedbox.web.js"></script> 				
		<script type="text/javascript" src="./js/third-party/clipboard.min.js"></script> 
		<script type="text/javascript" src="./js/onlyonet.js"></script>
		<script type="text/javascript" src="./js/onlyonet.config.js"></script>
		<script type="text/javascript" src="./js/onlyonet.ui.js"></script>	
		<script type="text/javascript" src="code.js"></script>	
			
		<script type="text/javascript">
			jQuery.loadScript = function (url, callback) {
								jQuery.ajax({
									url: url,
									dataType: 'script',
									success: callback,
									async: false
								});
							}

			$(function() {	
				AscDesktopEditor.SetCryptoMode("", ASC_DESKTOP_EDITOR_DEFAULT_MODE, function(retCode) {
					ONLYONET.UI.init();
				});
			});			
		</script>
	  </head>
      <body>	
		   <div class="info-box excl" style="display: none;" data-t="info-box-off">
	  		 	<strong>The end-to-end encryption mode is OFF.</strong> To switch it on, you must close all active edition sessions.
		   </div>
		   <span data-t="title-pop" id="enc-box-infobox">Developer Preview</span>
		   <section id="enc-box-caption">
				<h3 class="table-caption" data-t="title">End-to-end encryption</h3>
				<div class="onoffswitch">
					<input type="checkbox" name="onoffswitch" class="onoffswitch__checkbox" id="enc-mode-switch"/>
					<label class="onoffswitch__label" for="enc-mode-switch"></label>
				</div>					
			</section>	
			<section id="box-blockchain-connect">	
				<p data-t="box-blockchain-connect-description-line1">
					Keep your DOCX, XLSX and PPTX files always encrypted and private. Edit and collaborate on your docs securely.
				</p>
				<p>	
					<span data-t="box-database-info-description-line2">ONLYOFFICE uses AES-256 to encrypt your files, and asymmetric encryption algorithm to securely store the encryption data in the private database on your portal</span>
					<a data-t="box-blockchain-connect-btn-read" class="link-gray" target="popup" href="https://www.onlyoffice.com/e2e-encryption.aspx">Read how it works </a>
				</p>
				<p>	
					<span data-t="box-database-connect-description-line1">Before you start:</span>
					<ul>
						<li data-t="box-database-connect-description-line2">Log in to your ONLYOFFICE portal via Connect to cloud section</li>
						<li data-t="box-database-connect-description-line3">Obtain your personal encryption data using the button below.</li>
					</ul>
				</p>
				<p style="margin-top: 30px">
					<button data-t="box-database-connect-btn-create" class="btn primary">Generate new credentials</button> 
					<a data-t="box-database-connect-btn-cancel" class="text-sub link" href="javascript:void(0)">Use the existing credentials</a>
				</p>
				<p data-t="box-database-connect-description-warning">
					Warning! This network was created for demonstration purposes only. Please, do NOT use it to encrypt your sensitive documents.
				</p>		
				<p data-t="box-database-connect-description-line4" style="color: #888">
					ONLYOFFICE will generate your individual pair of the encryption keys: public and private. Your private key (used for decrypting the documents) will be stored on this machine. For the correct work of the application, do not remove this file. You may keep a copy in some other location as a backup.					
				</p>
				<p data-t="box-database-connect-description-line5" style="color: #888">
					You can also use your existing credentials and the private key to get access to the files encrypted with that account.
				</p>								
			</section>
		<section id="box-blockchain-info" style="display: none">
			<p data-t="box-blockchain-connect-description-line1">
				Keep your DOCX, XLSX and PPTX files always encrypted and private. Edit and collaborate on your docs securely.
			</p>
			<p>	
				<span data-t="box-blockchain-info-description-line2">ONLYOFFICE uses AES-256 to encrypt your files, and asymmetric encryption algorithm to securely store the encryption data in the private database on your portal.</span>
				<a data-t="box-blockchain-connect-btn-read" class="link-gray" target="popup" href="https://www.onlyoffice.com/e2e-encryption.aspx">Read how it works </a>
			</p>
			<a href="javascript:window.AscDesktopEditor.ExportAdvancedEncryptedData();" data-t="tbl-acount-info-btn-export-private-key" class="link-gray">Export private key</a>
			<table id="tbl-acount-info" style="display: none;">
				<tbody>
					<tr>
						<td>
							 <span>-</span> <a data-t="tbl-acount-info-btn-copy-address1" href="javascript:void(0)" class="link-gray">Copy public key</a>							
						</td>
						<td></td>
						<td></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3">
								<a data-t="tbl-acount-info-btn-export-private-key" href="javascript:void(0);" class="link-gray">Export private key</a>
						</td>
					</tr>
				</tfoot>
			</table>					
			<p data-t="box-database-info-description-line3" style="color: #888">
				This is your individual private key. It is also stored on this machine. For the correct work of the application, do not remove this file. You may keep a copy in some other location as a backup.
			</p>
		</section>	
		<dialog id="dlg-onoffswitch" class="dlg scaled" style="width: 500px;">
				<div class="title">
				  <label data-t="dlg-onoffswitch-caption" class="caption">Secure Login</label>
				  <span class="tool close img-el"></span>
				</div>
				<div class="body">
					<section>
						<div>
							<div class="error-box"><p class="msg-error" data-t="dlg-onoffswitch-msg-error" style="display: none;">Check the password</p></div>															
							<input type="password" name="" class="tbox" value="" placeholder="enter password" />							
							<div style="height:10px;"></div>
							<div class="lr-flex">
								<div>
									<span id="dlg-onoffswitch-btn-import-label" data-t="dlg-onoffswitch-btn-import-completed">Key is imported.</span>
									<a class="text-sub link" data-t="dlg-onoffswitch-btn-import" href="javascript:void(0);">Import private key</a>
								</div>
								<span></span>
								<div>
									<img class="img-loader">
									<button data-t="dlg-onoffswitch-btn" class="btn primary">Log in</button>
								</div>
							</div>
						</div>
					</section>
				</div>
		</dialog>	
		<dialog id="dlg-vault" class="dlg scaled" style="width: 600px;">
			<div class="title">
				<label data-t="dlg-vault-mnemonic-caption1" class="caption">Generate new credentials</label>
				<span class="tool close img-el"></span>
			</div>
		    <div class="body">
				<section>
					<div>							
						<div class="lr-flex">					
								<label data-t="dlg-vault-new-password1">New Password (min 8 chars) **</label> 
								<div class="error-box"><p class="msg-error" data-t="dlg-vault-new-password-msg-error" style="display: none;">Don't Match</p></div>	
						</div>
						<input type="password" class="tbox" value="" />	
						<div class="lr-flex">					
								<label data-t="dlg-vault-confirm-password">Confirm Password</label> 
								<div class="error-box"><p class="msg-error" data-t="dlg-vault-new-password-msg-error" style="display: none;">Don't Match</p></div>	
						</div>
						<input type="password" class="tbox" value=""  />	
						<div class="error-box">
							<p class="msg-error" style="display: block; color:inherit; margin: 0px 0px 12px 0px" data-t="dlg-vault-description-line22">
								* This password encrypts the DOCX file with your credentials. Use it to enable the Encryption mode.
							</p>
						</div>
						<div style="height:10px;"></div>
						<div class="lr-flex">
							<a class="text-sub link" href="javascript:void(0)" data-t="dlg-vault-description-btn-cancel">Cancel</a>
							<span></span>
							<div>
								<img class="img-loader" />
								<button class="btn primary" data-t="dlg-vault-description-btn1">Create account</button>
							</div>
						</div>
					</div>
				</section>
			</div>
		</dialog>	
		<dialog id="dlg-private-key" class="dlg scaled" style="width: 600px">
			<div class="title">
				<label class="caption" data-t="dlg-private-key-caption">Your private key</label>
				<span class="tool close img-el"></span>
			</div>
			<div class="body">
				<section>
					<div>	
						<p style="margin: 0px 0px 12px 0px">
							<span>-</span>	
						</p>
						<div style="height:10px;"></div>
						<div class="lr-flex" style="justify-content:flex-end;">
							<button class="btn primary" data-t="dlg-private-key-btn">Copy to clipboard</button>
						</div>
					</div>
				</section>
			</div>
		</dialog>
	</body>
</html>